<template>
  <div class="dashboard-container">

<!--    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="8">
        <map-chart height="500px" class="chart-box"/>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6">
        <ranked-table max-height="500px"/>
      </el-col>
    </el-row>-->

  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import MapChart from './components/map/MapChart.vue'
import BranchIssuesTable from './components/table/BranchIssuesTable.vue'

@Component({
  name: 'Dashboard',
  components: {
    MapChart,
    BranchIssuesTable
  }
})
export default class extends Vue {
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 32px;
  //background-color: rgb(240, 242, 245);
  position: relative;

  .chart-box {
    background: #fff;
    //padding: 16px 16px 0;
    //margin-bottom: 32px;
    border: 1px solid rgb(240, 242, 245);
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
